<template>
    <div class="container">
            <div class="headTitle">
                <div class="icons" @click="backTo">
                    <span class="iconfont">&#xe62d;</span>
                </div>
                <div class="titles">导入包裹</div>
                <div class="introduction"></div>
            </div>
        <div class="bodys" v-for="(items,index) in datas">
<!--            主标题-->
            <div class="mainTitle">{{mainTitle}}</div>
<!--            lists-->
            <div class="lists">{{`${index}.${items.lists}`}}</div>
<!--            内容-->
            <div class="content">{{`${items.content}`}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "introduction",
    methods:{
        backTo(){
            this.$router.go(-1);
        }
    },
    data(){
        return{
            mainTitle:'关于添加本人手机号与亲友的功能说明',
            datas:[
                {
                    lists:'为什么要绑定本人的手机号?',
                    content:`阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜`
                },
                {
                    lists:'如何添加亲友?',
                    content:`阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜
                             阿巴阿巴歪比巴卜`
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
/*引入图标*/
@import "../../../../assets/userIconFont/iconfont.css";
.container{
    .headTitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px;
        .icons{
            transform: rotate(180deg);
            span{
                font-size: 40px;
                color: #8590a6;
            }
        }
        .titles{
            font-size: 35px;
        }
        .introduction{
            font-size: 10px;
            color: #8590a6;
        }
    }
    .bodys{
        margin: 40px;
        .mainTitle{
            padding: 20px 0;
            font-weight: bolder;
            font-size: 30px;
        }
        .lists{
            padding: 20px 0;
            font-weight: bolder;
            font-size: 30px;
        }
        .content{
            padding: 20px 0;
            font-weight: bolder;
            font-size: 30px;
        }
    }
}
</style>